<template>
	<view class="personaldata">
		<view class="box"></view>
		<view class="list-personal" v-for="(item,index) in alldata">
			<view class="chat-item">
				<view class="chat-content">
					<text class="title">头像</text>
				</view>
				<image class="chat-avatar" :src="item.userImg" mode="aspectFit"></image>
			</view>
			<view class="separator"></view>
			<view class="chat-item">
				<view class="chat-content">
					<text class="title">用户id</text>
				</view>
				<text class="information">{{item.userId}}</text>
			</view>
			<view class="separator"></view>
			<view class="chat-item">
				<view class="chat-content" @click="editNickName">
					<text class="title">昵称</text>
				</view>
				<text class="information">{{alldata[0].nickName ||'Allen'}}</text>
			</view>
			<view class="separator"></view>
			<view class="chat-item">
				<view class="chat-content" @click="editDesc">
					<text class="title">简介</text>
				</view>
				<text class="information">{{alldata[0].desc ||'这家伙很懒，什么都没有留下！'}}</text>
			</view>
 
		</view>
		<uni-popup ref="popupNick" type="bottom" border-radius="10px 10px 0 0" >
			<view class="register-box">
				<view class="title-x">
					<view class="title">修改昵称</view>
					<uni-icons @click="back" type="closeempty" size="24" color="#c8c9cc"></uni-icons>
				</view>
				<view class="from1">
					<uv-form labelPosition="left" ref="form">
						<uv-form-item label="昵称" labelWidth="80px" prop="userInfo.phone" borderBottom>
							<uv-input v-model="newNickName" placeholder="输入新昵称" border="none">
							</uv-input>
						</uv-form-item>
					</uv-form>
				</view>
				<view class="register1-btn" @click="confirmEdit('popupNick')">保存</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupDesc" type="bottom" border-radius="10px 10px 0 0">
			<view class="register-box">
				<view class="title-x">
					<view class="title">修改简介</view>
					<uni-icons @click="back" type="closeempty" size="24" color="#c8c9cc"></uni-icons>
				</view>
				<view class="from1">
					<uv-form labelPosition="left" ref="form">
						<uv-form-item label="简介" labelWidth="80px" prop="userInfo.phone" borderBottom>
							<uv-input v-model="newDesc" placeholder="输入新简介" border="none">
							</uv-input>
						</uv-form-item>
					</uv-form>
				</view>
				<view class="register1-btn" @click="confirmEdit('popupDesc')">保存</view>
			</view>
		</uni-popup>
 
 
	</view>
</template>
 
<script>

	export default {
		data() {
			return {
				token: '',
				alldata: [],
				newNickName: '',
				newDesc: '',
			}
		},
		// 放在 onShow 中，因为它会在页面每次出现时被触发
		onShow() {
			//获取token值
			this.token = uni.getStorageSync('token');
			//首先判断用户是否登录 token是否存在 如果存在可以继续下一步
			//如果不存在 让他跳转到登录页面
			if (this.token == '') {
				uni.navigateTo({
					url: "/pages/login/login"
				})
				return //终止后面代码的运行
			}
			this.getpersonaldata();
		},
		methods: {
			 handleClose() {
			    // 确保关闭方法在适当的时候调用
			    this.$refs.myPopup.close();
			  },
			confirmEdit(refName) {
				if (refName === 'popupNick') {
					this.updateNickName();
				} else if (refName === 'popupDesc') {
					this.updateDesc();
				}
			},
			// 弹出编辑昵称窗口并清空输入框
			editNickName() {
				this.newNickName = this.alldata[0].nickName;
				this.$refs.popupNick.open();
			},
 
			// 弹出编辑简介窗口并清空输入框
			editDesc() {
				this.newDesc = this.alldata[0].desc;
				this.$refs.popupDesc.open();
			},
 
			// 提交昵称修改
			updateNickName() {
				uni.request({
					url: '替换为自己的url地址值',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
					},
					data: {
						appkey: '替换为自己的appkey值',
						tokenString: this.token,
						nickName: this.newNickName
					},
					// ...配置项...
					success: (res) => {
						if (res.data.code === 200) {
							this.alldata[0].nickName = this.newNickName; // 更新昵称
							this.$refs.popupNick.close(); // 关闭弹出层
						} else {
							uni.showToast({
								title: res.data.msg || '修改失败',
								icon: 'none'
							});
						}
					}
				});
			},
 
			// 提交简介修改
			updateDesc() {
				uni.request({
					url: '替换为自己的url地址值',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
					},
					data: {
						appkey: '替换为自己的appkey值',
						tokenString: this.token,
						desc: this.newDesc
					},
					// ...配置项...
					success: (res) => {
						if (res.data.code === 200) {
							this.alldata[0].desc = this.newDesc; // 更新简介
							this.$refs.popupDesc.close(); // 关闭弹出层
						} else {
							uni.showToast({
								title: res.data.msg || '修改失败',
								icon: 'none'
							});
						}
					}
				});
			},
 
			//获取个人信息的数据
			getpersonaldata() {
				uni.request({
					url: '替换为自己的url地址值', //仅为示例，并非真实接口地址。
					data: {
						appkey: '替换为自己的appkey值',
						tokenString: this.token
					},
					success: (res) => {
						// 在这里打印从后端返回的数据
						console.log('返回的数据:', res);
						this.alldata = res.data.result;
					},
					fail: (err) => {
						// 在请求失败时打印错误信息
						console.error('请求失败:', err);
					}
				});
			},
			back() {
				uni.navigateTo({
					url: "/pages/personaldata/personaldata"
				})
			},
			goto() {
				uni.switchTab({
					url: "/pages/my/my"
				});
			},
			
		}
	}
</script>
 
<style lang="scss">
 
	.personaldata {
 
		flex-direction: column;
 
 
		.box-bg {
			background-color: #F5F5F5;
 
			/deep/ .uni-nav-bar-text {
				color: black !important;
				font-size: 32rpx;
			}
 
		}
 
		.box {
			height: 200rpx;
			background: #0c34ba;
		}
 
		.list-personal {
 
			height: 450rpx;
			flex-direction: column;
			margin: 20rpx;
			flex: 1;
			border-radius: 20rpx 20rpx 0 0;
			margin-top: -50rpx;
			background: white;
			display: flex;
			flex-direction: column;
			box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
 
			.chat-item {
				display: flex;
				align-items: center;
				padding: 20rpx 20rpx;
				/* 调整内边距 */
			}
 
			.separator {
				height: 1rpx;
				width: 90%;
				background-color: #f5f6f7;
				margin-top: 10rpx;
				margin-left: 30rpx;
			}
 
			.chat-content {
				flex: 1;
				margin-right: 20rpx;
				/* 头像与内容的间隔 */
			}
 
			.title {
				font-size: 28rpx;
				/* 标题字号 */
				color: #333;
				/* 标题颜色 */
			}
 
			.chat-avatar {
				width: 80rpx;
				/* 头像宽度 */
				height: 80rpx;
				/* 头像高度 */
				border-radius: 50%;
				/* 如果需要圆形头像 */
				margin-left: auto;
				/* 使头像靠右 */
			}
 
			.information {
				color: #969799;
				font-size: 26rpx;
			}
 
 
		}
 
		.register-box {
			height: 400rpx;
			background: white;
			padding: 30rpx;
 
			.title-x {
				display: flex;
				justify-content: space-between;
			}
 
			.title {
				color: #646566;
				font-weight: 600;
				font-size: 52rpx;
			}
 
			.from1 {
				margin-top: 70rpx;
			}
 
			.register1-btn {
				height: 90rpx;
				font-size: 30rpx;
				text-align: center;
				line-height: 90rpx;
				color: white;
				border-radius: 50rpx;
				margin-top: 100rpx !important;
				margin: 0 10rpx;
				background: #1441cc;
			}
		}
 
 
	}
</style>